<template>
	<view class="set-font-size-vison">
		<uni-nav-bar fixed shadow left-icon="left" title="设置字体大小">
			<block slot="right">
				<button class="finish-btn">完成</button>
			</block>
		</uni-nav-bar>
		<view class="font-view" id="list-box">
			<view class="talk-list">
				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="item flex_col" :class=" item.type == 1 ? 'push':'pull' ">
						<image :src="item.pic" mode="aspectFill" class="pic"></image>
						<view class="content">{{item.content}}</view>
					</view>
				</view>
			</view>
			<view class="footer-view">
				<image class="progress-bg" src="../../static/img/progress-bg.png" mode=""></image>
			</view>
		</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				talkList: [{
					"id": 1,
					"content": `预览字体大小`,
					"type": 1,
					"pic": "../../static/img/avatar.png"
				}, {
					"id": 2,
					"content": `拖动下面的滑块，可设置字体 大小`,
					"type": 0,
					"pic": "../../static/img/avatar.png"
				}, {
					"id": 3,
					"content": `设置后，会改变整个界面的字 体大小。`,
					"type": 0,
					"pic": "../../static/img/avatar.png"
				}],
			}
		},
		mounted() {},
		onPageScroll(e) {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.footer-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 202rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.progress-bg {
			width: 564rpx;
			height: 94rpx;
		}
	}

	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}


	.finish-btn {
		width: 104rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #3F93FF;
		border-radius: 42rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.font-view {
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}


	.talk-list {
		padding-bottom: 20rpx;


		.item {
			padding: 40rpx 30rpx 0 30rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 84rpx;
				height: 84rpx;
				border-radius: 10rpx;
				border: #fff solid 1px;
			}

			.content {
				padding: 20rpx;
				border-radius: 4px;
				max-width: 368rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}


			&.pull {
				.content {
					margin-left: 32rpx;
					background-color: #fff;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}


			&.push {

				flex-direction: row-reverse;
				color: #fff;

				.content {
					margin-right: 32rpx;
					background-color: #444444;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #444444;
						position: absolute;
						top: 30rpx;
						right: -18rpx;

					}
				}
			}
		}
	}
</style>